<template>
  <div class="growing_">
    <div class="growing_hade">
      <img class="growing_hade_img" :src="growing_hade_img" alt="" />
      <div class="growing_user">
        <p>Hi,{{ growing_name }}</p>
        <span>今天是你学习的第{{ growing_date }}天</span>
      </div>
      <div class="growing_right">
        <div class="growing_diamond">
          <img :src="growing_hade_diamond" alt="" @click="fn" />
          <span>{{ growing_diamond_namber }}</span>
        </div>
        <div class="growing_diamond">
          <img :src="growing_hade_like" alt="" @click="puls1" />
          <span>{{ zan }}</span>
        </div>
      </div>
    </div>
    <div class="growing_body">
      <!-- 挂板 -->
      <div class="a_list">
        <div class="a_list_top">
          <div class="a_list_top_left">
            <img :src="a_list_left" alt="" />
          </div>
          <div class="a_list_top_right">
            <img :src="a_list_right" alt="" />
          </div>
        </div>
        <div class="a_list_body">
          <div class="growing_cass">
            <p>共学习课次</p>
            <div>
              <p>{{ growing_cass }}</p>
              <span>次</span>
            </div>
          </div>
          <em>/</em>
          <div class="growing_english">
            <p>共学习单词</p>
            <div>
              <p>{{ growing_english }}</p>
              <span>个</span>
            </div>
          </div>
          <em>/</em>
          <div class="growing_mvp">
            <p>共获得MVP</p>
            <div>
              <p>{{ growing_MVP }}</p>
              <span>个</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 挂板 -->
      <div class="growing_list">
        <div class="growing_top">
          <img :src="growing_hade_list" alt="" />
          <span>我的成就</span>
          <div @click="gogrowing_next">></div>
        </div>
        <div class="growing_medal">
          <div class="gro" style="width: 100%">
            <div
              v-for="(item, index) in list"
              :key="index"
              @click="changeimg(index)"
            >
              <img :src="item.img" alt="" />
              <p>{{ item.des }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
/* <!-- 挂板 --> */
import a_list_left from "../../assets/images/GrowingImages/成就-左回形针.png";
import a_list_right from "../../assets/images/GrowingImages/成就-右回形针.png";
/* <!-- 挂板 --> */
import growing_hade_img from "../../assets/images/GrowingImages/成就-头像.png";
import growing_hade_diamond from "../../assets/images/GrowingImages/成就-钻石.png";
import growing_hade_like from "../../assets/images/GrowingImages/成就-点赞.png";
import growing_hade_list from "../../assets/images/GrowingImages/成就-列表图标.png";
import growing_list_next from "../../assets/images/GrowingImages/成就-箭头.png";
import growing_list_medal from "../../assets/images/GrowingImages/成就-徽章.png";
import url1 from "../../assets/images/days.png";
import url2 from "../../assets/images/time.png";
import url3 from "../../assets/images/学霸.png";
import url4 from "../../assets/images/GrowingImages/图层 2@3x.png";
import url5 from "../../assets/images/GrowingImages/图层 4@3x.png";
import url6 from "../../assets/images/GrowingImages/图层 5@3x.png";
import url7 from "../../assets/images/GrowingImages/图层 3@3x.png";
import { useRouter } from "vue-router";
import { ref } from "vue";
import { Dialog } from "vant";
export default {
  setup() {
    // 钻石
    const fn = () => {
      Dialog.alert({
        message: "该功能暂未开发,后续陆续上线",
      }).then(() => {
        // on close
      });
    };
    //徽章
    const list = ref([
      {
        img: growing_list_medal,
        des: "常胜将军",
      },
      {
        img: url1,
        des: "孜孜不倦",
      },
      {
        img: url2,
        des: "持之以恒",
      },
      {
        img: url3,
        des: "我是学霸",
      },
    ]);
    const changeimg = (i) => {
      if (i == 0) {
        list.value[0].img = url4;
      }
      if (i == 1) {
        list.value[1].img = url5;
      }
      if (i == 2) {
        list.value[2].img = url6;
      }
      if (i == 3) {
        list.value[3].img = url7;
      }
    };
    // 点赞
    const zan = ref(0);
    let timer;
    const puls1 = () => {
      zan.value += 1;

      if (timer) {
        // console.log(2);
      } else {
        timer = setTimeout(() => {
          console.log(1);
          timer = "";
        }, 2000);
      }
    };
    //
    //const likeup = function(){}
    const router = useRouter();
    const gogrowing_next = () => {
      router.push("/growing_next");
    };

    // getname
    let growing_name;
    if (localStorage.getItem("name")) {
      growing_name = localStorage.getItem("name");
    } else {
      growing_name = "Barek";
    }
    return {
      growing_hade_img,
      growing_hade_diamond,
      growing_hade_like,
      growing_hade_list,
      growing_list_next,
      growing_list_medal,
      /* <!-- 挂板 --> */
      a_list_left,
      a_list_right,
      /* <!-- 挂板 --> */
      gogrowing_next,
      growing_name,
      growing_date: 0,
      growing_diamond_namber: 0,
      growing_like_namber: 0,
      growing_cass: 0,
      growing_english: 0,
      growing_MVP: 0,
      puls1,
      zan,
      list,
      changeimg,
      fn,
    };
  },
};
</script>
<style lang="less" scoped>
.growing_hade {
  background: url("../../assets/images/GrowingImages/成就-头部.png");
  width: 100%;
  height: 148px;
  overflow: hidden;
  box-sizing: border-box;
  padding-left: 10.5px;
  padding-right: 10.5px;
  padding-top: 39.5px;
  margin-bottom: -20px;
  .growing_hade_img {
    float: left;
    margin-left: 4.5px;
    border-radius: 50%;
    width: 57.5px;
    height: 57.5px;
    margin-right: 16.5px;
  }
  .growing_user {
    box-sizing: border-box;
    float: left;
    color: white;
    padding-top: 14px;
    p {
      font-size: 20px;
      line-height: 20px;
    }
    span {
      display: block;
      font-size: 12px;
      line-height: 12px;
      padding-top: 9.5px;
      opacity: 0.8;
    }
  }
  .growing_right {
    float: right;
    div {
      box-sizing: border-box;
      padding-top: 10px;
      float: left;
      margin-right: 4.5px;
      margin-left: 5.5px;
    }
    img {
      display: block;
      margin: 0 auto;
    }
    span {
      margin-top: 4.5px;
      color: white;
      display: block;
      font-size: 12px;
      text-align: center;
      font-weight: bold;
      opacity: 0.8;
    }
    .growing_diamond {
      width: 50px;
      height: 50px;
      border-radius: 21px;
      background-color: #0f95eb;
    }
  }
}
.growing_body {
  width: 100%;
  height: 300px;
  height: 80px;
  padding-top: 120px;
  border-radius: 15px 15px 0 0;
  background-color: white;
  position: relative;
  box-sizing: border-box;
  padding-left: 10.5px;
  padding-right: 10.5px;
}
/* <!-- 挂板 --> */
.a_list {
  border-radius: 25px;
  min-height: 99px;
  box-shadow: 1px 1px 5px 3px rgba(0, 0, 0, 0.4);
  position: absolute;
  width: 95%;
  left: 50%;
  margin-left: -47.5%;
  top: -20px;
  background-color: white;
  .a_list_top {
    padding-top: 3px;
    height: 15px;
    div {
      height: 10px;
      width: 10px;
      border-radius: 5px;
      background-color: #777;
      opacity: 0.7;
      margin: 0px 25px;
      position: relative;
    }
    img {
      position: absolute;
      width: 9px;
      height: 20px;
      top: -15px;
    }
    .a_list_top_right {
      float: right;
      img {
        left: -3px;
      }
    }
    .a_list_top_left {
      float: left;
      img {
        right: -3px;
      }
    }
  }
  .a_list_body {
    width: 100%;
    display: flex;
    justify-content: space-around;
    em {
      display: block;
      width: 7px;
      height: 17.5px;
      font-size: 12px;
      font-style: normal;
      opacity: 0.1;
      line-height: 60px;
    }
    div {
      > div {
        padding-left: 20px;
        width: 100%;
        text-align: center;
        overflow: hidden;
      }
    }
    p {
      display: block;
      font-size: 12px;
      opacity: 0.7;
      margin-bottom: 20px;
      margin: 0 auto;
    }
    span {
      text-align: center;
      font-size: 12px;
      display: block;
      opacity: 0.6;
      float: left;
    }
    > div {
      float: left;
      margin: 0 24px;
    }
    div {
      div {
        margin: 0 auto;
        margin-top: 10px;
        text-align: center;
        > p {
          float: left;
          text-align: center;
          font-size: 18px;
          margin-right: 3px;
          font-weight: bolder;
        }
      }
    }
  }
}
.growing_list {
  .growing_top {
    padding-left: 10.5px;
    padding-right: 10.5px;
    width: 100%;
    position: relative;
    margin-bottom: 10px;
    box-sizing: border-box;
    img {
      width: 25px;
      height: 24px;
      position: absolute;
      top: 3px;
    }
    span {
      font-size: 16px;
      margin-left: 27px;
    }
    div {
      width: 22px;
      height: 22px;
      border-radius: 25px;
      float: right;
      color: rgba(0, 0, 0, 0.8);
      font-weight: bolder;
      background-color: rgba(92, 92, 92, 0.329);
      font-size: 18px;
      opacity: 0.6;
      text-align: center;
      line-height: 22px;
    }
  }
  .growing_medal {
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
    div {
      display: inline-block;
      margin-left: 10px;
      margin-bottom: 12px;
      margin-right: 12px;
      img {
        width: 64px;
        height: 71px;
        display: block;
        margin: 0 auto;
      }
      p {
        font-size: 16px;
        opacity: 0.7;
        text-align: center;
      }
    }
  }
}
/* <!-- 挂板 --> */
</style>
